﻿@using TagCss.Helpers;

<article>
    @TagCssHtmlHelper.Title("模态框", "modals")

    <!--Modal 尺寸-->
    <section>
        @TagCssHtmlHelper.SubTitle("可选尺寸","modals-sizes")
        <p>扩充了一个全屏尺寸，通过为<code>.modal-dialog</code>增加<code>.modal-full</code>实现</p>
        <div>
            <button class="btn btn-default" data-toggle="modal" data-target="#modals-full">全屏模态框</button>
            <div class="modal fade" id="modals-full" tabindex="-1" role="dialog" aria-labelledby="">
                <div class="modal-dialog modal-full">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">宽度占满全屏的模态框</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</article>